<template>
	<view class="orderManagement">
		<view class="content">
			<view class="ul" v-for="item in orderList" :key="item.id">
				<div class="li liTwo">
					<div class="name">子订单编号：</div>
					<div class="contentValue">{{ item.sub_order_sn }}</div>
				</div>
				<div class="li">
					<div class="name">商品名称：</div>
					<div class="contentValue">{{ item.goods_title }}</div>
				</div>
				<div class="li">
					<div class="name">期数：</div>
					<div class="contentValue">{{ item.goods_periods }}/{{ item.goods_periods_total }}</div>
				</div>
				<div class="li">
					<div class="name">领取状态：</div>
					<div class="contentValue">{{ item.status == 0 ? '未领取' : item.status == 1 ? '已领取' : ""}}</div>
				</div>
				<div class="li">
					<div class="name">领取时间：</div>
					<div class="contentValue">{{ item.receive_time }}</div>
				</div>
				<div class="li">
					<div class="name">收货人姓名：</div>
					<div class="contentValue">{{item.order_data.consignee}}
					</div>
				</div>
				<div class="li liTwo">
					<div class="name">收货人手机号码：</div>
					<div class="contentValue">{{ item.order_data.mobile }}</div>
				</div>
				<div class="li liTwo">
					<div class="name">物流单号：</div>
					<div class="contentValue">{{ item.order_data.express_num }}</div>
				</div>
				<div class="li">
					<div class="name">订单状态：</div>
					<div class="contentValue">
						{{ item.status == 1? text == 0 ? '待付款' : text == 1 ? '待发货' : text == 2
							  ? "拣货中" : text == 3 ? '已发货' : text == 4 ? '售后' :
							  text == 5 ? '自动取消' : '' : "未领取"
						}}
					</div>
				</div>
				<div class="li">
					<div class="name">收货地址：</div>
					<div class="contentValue">
              {{ item.order_data.province }}-{{ item.order_data.city }}-{{ item.order_data.district }}-{{ item.order_data.address }}</div>
				</div>
			</view>
			<view class="pagination" v-if="total">
				<uni-pagination @change="on_change" :total="total"></uni-pagination>
				<view class="example">
					<text class="example-info">当前页：{{ page }}，数据总量：{{ total }}条，每页数据：{{ 10 }}</text>
				</view>
			</view>

			<!-- <view v-if="orderList.length <= 0 && pageIndex != 2" class="noData">请搜索数据</view> -->

		</view>

		<u-loading-page loading-color="#1890ff" color="#fff" bg-color="rgba(0, 0, 0, 0.5)" :loading="loadingType">
		</u-loading-page>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadingType: false,
			total: 0,
			page: 1,
			orderList: [],
			orderSn: '',
		};
	},
	onShow() {
	},
	onLoad(data) {
		this.orderSn = data.order_sn
		this.ajax_orderList()
	},
	methods: {
		//复制订单号
		copyOrderId(oid){
			var that = this;
			uni.setClipboardData({
				data: oid,
				success: function () {
					that.$showToast('复制成功')
				}
			});
		},
		// 全部订单
		ajax_orderList() {
			this.loadingType = true;
			this.$request.request({
				url: 'order/treeSubsheetList',
				method: 'POST',
				data: {
					page: this.page,
					order_sn: this.orderSn,
				}
			}).then(res => {
				this.orderList = res.data.list.data
				this.total = res.data.list.total
			}).finally(() => {
				this.loadingType = false;
			})
		},
		on_change(page) {
			this.page = page.current;
			this.ajax_orderList()
		},
	},
};
</script>
<style lang="scss" scoped>
.orderManagement {
	.slot-content {
		width: 100% !important;

		.selectBox {
			// display: flex;
			// align-items: center;
			font-size: 14px;
			margin-top: 30rpx;

			.name {
				white-space: normal nowrap;
				margin-bottom: 20rpx;
			}

			.select {
				flex: 1;

				.radio:nth-child(1) {
					margin-left: 0;
				}

				.radio {
					margin-left: 40rpx;
				}
			}
		}
	}

	.content {
		padding: 20rpx;

		.ul:nth-last-child(1) {
			border-bottom: none;
		}

		.block{
			margin-top: 15rpx;
			width: 100%;
			font-size: 14px;
			padding: 20rpx;
			padding-bottom: 20rpx;
			border: 1px solid #ccc;
			.title{
				font-size: 15px;
				font-weight: 700;
			}
			.li {
				margin-top: 20rpx;
				width: 50%;
			}
		}

		.ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			font-size: 14px;
			border-bottom: 1px solid #ccc;
			padding-bottom: 20rpx;
			.li {
				margin-top: 20rpx;
				width: 50%;
				.img{
					width: 100rpx;
					height: 100rpx;
				}
				.contentValue {
					margin-top: 6rpx;
					.duplicate{
						color: #999999;
						font-size: 22rpx;
						border: 2rpx solid #999999;
						border-radius: 8rpx;
						padding:2rpx 8rpx;
						margin-left: 20rpx;
						float:right;
					}
				}
			}

			.liTwo {
				width: 100% !important;
			}

			.btnBox {
				display: flex;
				margin-top: 20rpx;
				max-width: 100%;
				flex-wrap: wrap;
				justify-content: space-between;

				.btn {
					// margin-top: 20rpx;
					margin: 10rpx;
					min-width: 30%;
				}
			}
		}
	}
}
</style>
